<template>
    <div class="sidebar" :style="isCollapseStore==false?box1:box2">
    <el-image :src="src"></el-image>
    <el-menu :default-active="activeObj=='home'?activeObj:activeIndex" 
    class="el-menu-vertical-demo"
    :collapse="isCollapseStore" background-color="#001529"
    text-color="#A7ACBA" active-text-color="aqua" 
    router
    :collapse-transition="false"
    v-for="item of routerList" :key="item.path"
    @select="handleSelect">
        <el-menu-item :index="item.path">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
        </el-menu-item>
    </el-menu>
    </div>
  </template>
  
  <script>
  import {mapState} from "vuex"
  export default {
      name:"sideBar",
      data() {
        return {
            src:require("@/assets/common/logo.png"),
            box1:"width: 10%;",
            box2:"width: 5%;",
            activeIndex:this.$route.name,
            routerList:this.$store.state.arrRouter,
        }
    },
    computed:{
        ...mapState(["isCollapseStore","activeObj"])
    },
    mounted(){
        // this.$bus.$on("isCollapseFun",this.isCollapseMyFun)
        // console.log(this.$router.history.current.name);
        // this.activeIndex = this.$router.history.current.name;
    },
      methods:{
        // isCollapseMyFun(user){
        //     this.isCollapse = user;
        // }
        //设置选中状态
        handleSelect(key, keyPath) {
           this.activeIndex = key;
           this.$store.commit("func2","");
      }
    }
  }
        //    console.log(key);
        //    this.arrRouter.map((item)=>{
        //     if(item.path==key){
        //         console.log(item.title);
        //     }
        //    })
  </script>
  
  <style scoped>
  .sidebar{
      height: 100vh;
      background: #001529 url("@/assets/common/leftnavBg.png") 0 100% no-repeat;
      transition:0.5s;
  }
  .el-menu{
    border-right: none;
  }
  </style>